<!--库存单位-->
<template>
    <div class="stock-unit-root">
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="单位名称" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入单位名称" clearable @input="getUnitList"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="getUnitList">查询</el-button>
                <el-button  @click="resetForm('queryRef')">重置</el-button>
                <el-button type="success"  icon="el-icon-plus" @click="handleAdd">添加单位</el-button>
            </el-form-item>
        </el-form> <!--// 条件搜索表单-->
        <!--单位列表-->
        <div>
            <el-table :data="tableData" style="width: 100%" :height="500">
                <el-table-column fixed label="" type="selection" width="55"></el-table-column>
                <el-table-column prop="unitId" label=" 单位ID" width="180" show-overflow-tooltip></el-table-column>
                <el-table-column prop="unit" label="单位名称" width="180"></el-table-column>
                <el-table-column prop="count" label="单位数量" width="180"></el-table-column>
                <el-table-column prop="isDefault" label="默认">
                    <template slot-scope="scope">
                        {{scope.row.isDefault === 1? '是':'否'}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200">
                    <template slot-scope="scope">
                        <!--// 详情按钮-->
                        <el-button type="warning" @click="handleClick(scope.row)" size="small" icon="el-icon-document"></el-button>
                        <!--删除确认框-->
                        <el-popconfirm title="确认删除吗?"
                                       @confirm="handleDelete(scope.$index, scope.row)"
                                       style="margin-left: 10px">
                            <!--删除按钮-->
                            <el-button type="danger" size="small" icon="el-icon-delete"
                                       slot="reference"></el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div><!--/ 单位列表-->

        <!--分页插件-->
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParam.pageNum"
                    :page-sizes="pageParam.sizes"
                    :page-size="pageParam.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParam.total">
            </el-pagination>
        </div><!--/ 分页插件-->

        <!--添加单位组件-->
        <StockUnitAdd v-if="addFlag" @close="handleAdd"></StockUnitAdd>

        <!--单位详情组件-->
        <SockUnitEdit v-if="clickFlag" :stock-unit="unitDTO" @close="handleClick"></SockUnitEdit>
    </div>
</template>

<script>
import API from '@/api/api';
import StockUnitAdd from "../../../components/stockList/StockUnitAdd";
import SockUnitEdit from "../../../components/stockList/SockUnitEdit";
export default {
    name: "StockUnit",
    components: {
        StockUnitAdd, SockUnitEdit
    },
    data() {
        return {
            // 添加单位标志位
            addFlag: false,
            // 查看单位标志位
            clickFlag: false,
            form: {
                unit: '',
            },
            // 用于组件间数据传输
            unitDTO: {},
            tableData: [],
            // 分页参数
            pageParam: {
                pageNum: 1,
                pageSize: 10,
                total: 0,
                sizes: [5, 10, 50, 100, 200],
            },

        }
    }, mounted() {
        this.getUnitList();
    },
    methods: {
        // 查询单位列表
        getUnitList() {
            let url = API.unit.selectUnitList;
            let param = JSON.parse(JSON.stringify(this.form));
            param.pageNum = this.pageParam.pageNum;
            param.pageSize = this.pageParam.pageSize;
            this.$get(url, param).then(res => {
                let data = res.data;
                if (data.success) {
                    this.tableData = data.data.list;
                    this.pageParam.total = data.data.total;
                }
            }).catch( err => {
                this.$message.error({
                    showClose: true,
                    message: "请求失败"
                })
            })
        },

        // 添加单位
        handleAdd() {
            this.addFlag = !this.addFlag;
            if (!this.addFlag) {
                this.getUnitList();
            }
        },
        // 删除按钮
        handleDelete(index, row) {
            if (row.isDefault === 1 && !this.$hasAdmin) {
                this.$message.warning({
                    showClose: true,
                    message: '请联系管理员删除默认单位!',
                });
                return;
            }
            let url = API.unit.remove;
            let param = {unitList: []};
            param.unitList.push(row);
            this.$post(url, param).then( res => {
                let data = res.data;
                if ( data.success ) {
                    this.$message.success( {
                        showClose: true,
                        message: data.msg
                    });
                    this.getUnitList();
                } else {
                    this.$message.error( {
                        showClose: true,
                        message: data.msg
                    })
                }
            }).catch( err => {
                this.$message.error( {
                    showClose: true,
                    message: "请求失败!"
                })
            })
        },
        // 详情和修改
        handleClick(row) {
            this.unitDTO = row;
            this.clickFlag = !this.clickFlag;
            if (!this.clickFlag) {
                this.getUnitList();
            }
        },
        // 重置表单
        resetForm(ref) {
            this.$refs[ref].resetFields();
            this.getUnitList();
        },
        // 分页
        handleSizeChange(val) {
            this.pageParam.pageSize = val;
            this.getTypeList();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pageParam.pageNum = val;
            this.getTypeList();
            console.log(`当前页: ${val}`);
        },
    }

}
</script>

<style lang="scss" scoped>

</style>
